<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getPurchaseApproval } from "@/api/purchaseManage/getPurchaseApproval";
import { ElTable, type TableColumnCtx } from "element-plus";
import personalCard from "./components/personalCard.vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";

defineOptions({
  name: "PurchaseApproval"
});
//初始化申请单

interface PurchaseApproval {
  id: string;
  name: string;
  total_price: number;
  dept_id: string;
  dept_name: string;
  emp_id: string;
  apply_name: string;
  apply_date: string;
  users_name: string;
  status: string;
  memo: string;
}
//123123123
const purchaseApply = ref([]);
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
const dataLoading = ref(true);

//api采购申审批getPurchaseApproval
const getPurchaseApprovalData = async () => {
  try {
    const { data } = await getPurchaseApproval();
    purchaseApproval.value = data.list;
    pagination.value = {
      ...pagination.value,
      total: data.list.length
    };
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 500);
  }
};

onMounted(() => {
  getPurchaseApprovalData();
});

const formDialogVisible = ref(false);
//const formData = ref({ ...INITIAL_DATA });

const tableRef = ref<InstanceType<typeof ElTable>>();

//清空条件筛选
const clearFilter = () => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  tableRef.value!.clearFilter();
};
//部门筛选
const filterDep = (value: string, row: PurchaseApproval) => {
  return row.dept_name === value;
};
//状态筛选
const filterTag = (value: string, row: PurchaseApproval) => {
  return row.status === value;
};
</script>

<template>
  <div class="root">
    <el-button
      style="float: left"
      :icon="useRenderIcon(AddFill)"
      @click="formDialogVisible = true"
    >
      新建采购申请
    </el-button>
    <div class="apply_record">
      <div class="clearbutton">
        <el-button style="padding-right: 10px" @click="clearFilter"
          >重置筛选
        </el-button>
      </div>
      <div class="table">
        <el-table
          ref="tableRef"
          row-key="date"
          :data="purchaseApply"
          style="width: 100%"
        >
          <el-table-column
            prop="apply_date"
            label="申请日期"
            sortable
            width="180"
            column-key="date"
          />
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="quantity" label="数量" width="80" />
          <el-table-column prop="total_price" label="金额" width="180" />
          <el-table-column
            prop="dept_name"
            label="部门"
            width="180"
            :filters="[
              { text: '研发', value: 'yf' },
              { text: '研发五', value: 'yf5s' },
              { text: '维护', value: 'wh' }
            ]"
            :filter-method="filterDep"
          />
          <el-table-column prop="users_name" label="使用人" width="180" />
          <el-table-column
            prop="status"
            label="状态"
            width="100"
            :filters="[
              { text: '审批中', value: '1' },
              { text: '审批通过', value: '9' }
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template #default="scope">
              <el-tag
                :type="scope.row.status === 'Home' ? '' : 'success'"
                disable-transitions
                >{{ scope.row.status }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="memo" label="备注" />
        </el-table>
      </div>
    </div>
    <personalCard v-model:visible="formDialogVisible" :data="formData" />
  </div>
</template>

<style scoped></style>
